<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
                <title>WKWebView 原生+JS 交互Demo</title>
                </head>
    
    <style type="text/css">
        .button {
            background: #f5be14;
            margin: 10px;
            text-align: center;
            width: 300px;
            height: 44px;
            line-height: 44px;
            margin: 10px auto;
            border-radius: 5px;
        }
    #setImage {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
    #setText {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
    </style>
    
    <body>
        
        <div class="button" onclick="firstClick()">大吉大利，点我吃鸡！</div>
        <div class="button" onclick="secondClick()">请用力的点我</div>
        <div class="button" onclick="thirdClick()">选择图片</div>
        <div class="button" onclick="fourthClick()">调用OC执行JS来连接两个字符串</div>
        <div class="button" onclick="openOtherTodoClick()">调用其他代办</div>
        <div id="setImage"></div>
        <div id="setText"></div>
    </body>
    
    <script type="text/javascript">
    
        function setupWKWebViewJavascriptBridge(callback) {
            if (window.WKWebViewJavascriptBridge) { return callback(WKWebViewJavascriptBridge); }
            if (window.WKWVJBCallbacks) { return window.WKWVJBCallbacks.push(callback); }
            window.WKWVJBCallbacks = [callback];
            window.webkit.messageHandlers.iOS_Native_InjectJavascript.postMessage(null)
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'https://__bridge_loaded__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }
    
    setupWKWebViewJavascriptBridge(function(bridge) {

        bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
            //给Native回调一个字符串
            var responseData = { 'Javascript':'我收到原生调用，这是给原生的回复内容' }
            responseCallback(responseData)
            var textDiv = document.getElementById("setText");
            textDiv.innerHTML = "我收到原生调用";
        })
        
        bridge.registerHandler('showImageOnDiv', function(data, responseCallback) {
            showImageOnxxDiv(data);
            //给Native回调一个字符串
            var responseData = { 'Javascript':'JS已处理工作' }
            responseCallback(responseData)
        });
        
        bridge.registerHandler("showTextOnDiv", function(data, responseCallback) {
                               var textDiv = document.getElementById("setText");
                               textDiv.innerHTML = data;
                               //给Native回调一个字符串
                               responseCallback({'Javascript':'JS已处理工作'});
                               });
        
        bridge.registerHandler("ocToJS",  function ocToJS(str1, str2) {
            var str = str1[0] + "，再吸根烟，架上烤架，" + str1[1];
            var textDiv = document.getElementById("setText");
            textDiv.innerHTML = str;
        });
        
    })
                                 
    function getText(index) {
        return document.getElementsByClassName("button")[index].innerText;
    }
    
    function firstClick() {
        var action = "firstClick";
        var token = getText(0);
        var paras = getParams(action, token);
        //JS调用OC
        WKWebViewJavascriptBridge.callHandler("firstClick", paras, function(response) {
                                            //这里是JS调用OC后，OC给的回调
                                            var textDiv = document.getElementById("setText");
                                            textDiv.innerHTML = response;
                                            });
    }
    
    function secondClick() {
        var action = "secondClick";
        var token = getText(1);
        var paras = getParams(action, token);
        //JS调用OC
        WKWebViewJavascriptBridge.callHandler("secondClick", paras, function(response) {
                                            //这里是JS调用OC后，OC给的回调
                                            var textDiv = document.getElementById("setText");
                                            textDiv.innerHTML = response;
                                            });
    }
    
    function thirdClick() {
        var action = "thirdClick";
        var token = getText(2);
        var paras = getParams(action, token);
        //JS调用OC
        WKWebViewJavascriptBridge.callHandler("thirdClick", paras, function(response) {
                                            //这里是JS调用OC后，OC给的回调
                                            var textDiv = document.getElementById("setText");
                                            textDiv.innerHTML = response;
                                            });
    }
    
    function fourthClick() {
        var action = "fourthClick";
        var paras = getParams(action, token);
        //JS调用OC
        WKWebViewJavascriptBridge.callHandler("fourthClick", paras, function(response) {
                                            //这里是JS调用OC后，OC给的回调
                                            var textDiv = document.getElementById("setText");
                                            textDiv.innerHTML = response;
                                            });
    }
    
    //     em.openLink({
    //url:'https://www.baidu.com', // 要打开链接的地址
    //type:'1',// 1 app内置浏览器打开 2，手机浏览器打开
    //success: function (res) {
   // }
    //});
    function openOtherTodoClick() {
        var action = "openLinkOtherTodo";
        var token = getText(0);
        var paras =  {
            "url" : "/mobilemode/apps/cpic/unifyTodo/index.jsp?moduleid=1359875363",
            "sysId" : "8ca81ea96b8f4b6c995346237df9525b",
            "openType" : "1"
          }
        //JS调用OC
        WKWebViewJavascriptBridge.callHandler("openLinkOtherTodo", paras, function(response) {
                                            //这里是JS调用OC后，OC给的回调
                                            var textDiv = document.getElementById("setText");
                                            textDiv.innerHTML = response;
                                            });
    }
    function getParams(action, token) {
        var paras = {
            'action' : action,
            'token' : token
        }
        return paras;
    }
    
    function showImageOnxxDiv(imageStr) {
        var imgDiv = document.getElementById("setImage");
        imgDiv.innerHTML = "<image style='width:200px;' src='data:image/png;base64,"+imageStr+"'>";
    }
    
        </script>
    
</html>

